<template>
    <div class="title">
        <Button
            v-for="menu in menuList"
            :key="menu.name"
            ghost
            :class="{ active: menuName === menu.name }"
            class="btn-item"
            @click="turnToPage(menu)"
            >{{ menu.title }}</Button
        >
    </div>
</template>
<script>
import router from '../../router';
export default {
    name: 'PageTitle',
    data() {
        return {};
    },
    computed: {
        title() {
            return this.$route.meta.title;
        },
        menuName() {
            return this.$store.getters.menuName;
        },
        menuList() {
            return this.$store.state.menuListLevel3;
        }
    },
    methods: {
        turnToPage(menu) {
            this.$router.push({
                name: menu.name
            });
        }
    }
};
</script>
<style scoped>
.btn-item {
    margin-right: 10px;
    border: none !important;
    background: none !important;
    outline: 1px solid var(--table-color) !important;
    color: var(--table-color) !important;
    border-radius: 4px !important;
}
.btn-item.active,
.btn-item.ivu-btn-default:not([disabled]):hover {
    border: none !important;
    outline: 2px solid #307ced !important;
    border: none !important;
    background: none !important;
    color: #307ced !important;
    font-weight: bold;
}
.title {
    font-weight: 700;
    font-size: 18px;
}
</style>
